<template>
  <div class="budget-page">
    <div class="content-area">
      <!-- 预算查询 -->
      <div class="budget-overview-card">
        <div class="section-header">
          <div class="section-title">预算查询</div>
        </div>
        <div class="filter-area">
          <van-field
            v-model="selectedYear"
            readonly
            label="年度"
            is-link
            @click="showYearPicker = true"
          />
        </div>
      </div>
      
      <!-- 预算项目列表 -->
      <div class="budget-list-section">
        <van-cell-group inset>
          <van-cell v-for="(item, index) in budgetProjects" :key="index" :title="item.name" is-link @click="viewProjectDetail(item)">
            <template #value>
              <div class="category-info">
                <div class="category-amount">¥{{ formatAmount(item.usedAmount) }} / ¥{{ formatAmount(item.totalAmount) }}</div>
                <van-tag :type="getTagType(item.usageRate)" size="medium">{{ item.usageRate }}%</van-tag>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
      
      <!-- 预算调整记录 -->
      <div class="budget-adjustment-section">
        <div class="section-header">
          <div class="section-title">预算调整记录</div>
          <van-button size="small" type="primary" plain icon="plus" @click="handleShowAdjustmentDialog">申请调整</van-button>
        </div>
        <van-tabs v-model:active="activeAdjustmentTab">
          <van-tab title="我发起的">
            <van-cell-group inset v-if="myAdjustmentRecords.length > 0">
              <van-cell v-for="(item, index) in myAdjustmentRecords" :key="index">
                <template #title>
                  <div class="adjustment-title">{{ getAdjustmentTypeText(item.type) }}: {{ item.projectName }}</div>
                </template>
                <template #label>
                  <div class="adjustment-info">
                    <div>{{ item.date }} · {{ item.applicant }}</div>
                    <div>{{ item.reason }}</div>
                  </div>
                </template>
                <template #value>
                  <div class="adjustment-amount" :class="getAmountClass(item.type)">
                    {{ getAmountPrefix(item.type) }}¥{{ formatAmount(item.amount) }}
                  </div>
                  <van-tag :type="getAdjustmentStatusType(item.status)">{{ getAdjustmentStatusText(item.status) }}</van-tag>
                </template>
              </van-cell>
            </van-cell-group>
            <van-empty v-else description="暂无调整记录" />
          </van-tab>
          <van-tab title="待我审批">
            <van-cell-group inset v-if="pendingApprovalRecords.length > 0">
              <van-cell v-for="(item, index) in pendingApprovalRecords" :key="index">
                <template #title>
                  <div class="adjustment-title">{{ getAdjustmentTypeText(item.type) }}: {{ item.projectName }}</div>
                </template>
                <template #label>
                  <div class="adjustment-info">
                    <div>{{ item.date }} · {{ item.applicant }}</div>
                    <div>{{ item.reason }}</div>
                  </div>
                </template>
                <template #value>
                  <div class="adjustment-amount" :class="getAmountClass(item.type)">
                    {{ getAmountPrefix(item.type) }}¥{{ formatAmount(item.amount) }}
                  </div>
                  <div class="action-buttons">
                    <van-button size="mini" type="danger" plain @click="rejectAdjustment(item)">拒绝</van-button>
                    <van-button size="mini" type="primary" @click="approveAdjustment(item)">批准</van-button>
                  </div>
                </template>
              </van-cell>
            </van-cell-group>
            <van-empty v-else description="暂无待审批记录" />
          </van-tab>
        </van-tabs>
      </div>
    </div>
    
    <!-- 预算调整申请弹窗 -->
    <CustomPopup 
      v-model:show="showAdjustmentDialog" 
      title="申请预算调整"
      @close="handleAdjustmentClose"
    >
      <van-form>
        <van-field
          v-model="adjustmentForm.project"
          label="预算项目"
          placeholder="请选择预算项目"
          readonly
          is-link
          @click="showProjectPicker = true"
        />
        
        <van-field
          v-model="adjustmentForm.category"
          label="预算类别"
          placeholder="请选择预算类别"
          readonly
          is-link
          @click="showCategoryPicker = true"
        />
        
        <van-field
          v-model="adjustmentForm.type"
          label="调整类型"
          placeholder="请选择调整类型"
          readonly
          is-link
          @click="showTypePicker = true"
        />
        
        <van-field
          v-model="adjustmentForm.amount"
          label="调整金额"
          type="digit"
          placeholder="请输入调整金额"
        />
        
        <van-field
          v-model="adjustmentForm.reason"
          label="调整原因"
          type="textarea"
          placeholder="请输入调整原因"
          rows="3"
          autosize
        />
        
        <van-field
          v-if="adjustmentForm.type === '追加预算'"
          v-model="adjustmentForm.source"
          label="资金来源"
          placeholder="请说明资金来源"
        />
      </van-form>
      
      <template #footer>
        <div class="popup-footer-buttons">
          <van-button plain type="default" @click="cancelAdjustment">取消</van-button>
          <van-button type="primary" @click="submitAdjustment">提交</van-button>
        </div>
      </template>
    </CustomPopup>
    
    <!-- 年份选择器 -->
    <van-popup v-model:show="showYearPicker" position="bottom">
      <van-picker
        title="选择年度"
        :columns="yearOptions"
        @confirm="onYearSelected"
        @cancel="showYearPicker = false"
        show-toolbar
      />
    </van-popup>
    
    <!-- 预算项目选择器 -->
    <van-popup v-model:show="showProjectPicker" position="bottom">
      <van-picker
        title="选择预算项目"
        :columns="projectOptions"
        @confirm="onProjectSelected"
        @cancel="showProjectPicker = false"
        show-toolbar
      />
    </van-popup>
    
    <!-- 预算类别选择器 -->
    <van-popup v-model:show="showCategoryPicker" position="bottom">
      <van-picker
        title="选择预算类别"
        :columns="budgetCategoryOptions"
        @confirm="onCategorySelected"
        @cancel="showCategoryPicker = false"
        show-toolbar
      />
    </van-popup>
    
    <!-- 调整类型选择器 -->
    <van-popup v-model:show="showTypePicker" position="bottom">
      <van-picker
        title="选择调整类型"
        :columns="adjustmentTypes"
        @confirm="onTypeSelected"
        @cancel="showTypePicker = false"
        show-toolbar
      />
    </van-popup>
    
    <!-- 项目详情弹窗 -->
    <CustomPopup 
      v-model:show="showDetailDialog" 
      title="预算详情"
      @close="handleDetailClose"
    >
      <div v-if="selectedProjectDetail">
        <van-cell-group inset>
          <van-cell title="项目名称" :value="selectedProjectDetail.name" />
          <van-cell title="总预算" :value="`¥${formatAmount(selectedProjectDetail.totalAmount)}`" />
          <van-cell title="已用预算" :value="`¥${formatAmount(selectedProjectDetail.usedAmount)}`" />
          <van-cell title="可用预算" :value="`¥${formatAmount(selectedProjectDetail.availableAmount)}`" />
          <van-cell title="使用进度">
            <template #value>
              <van-progress 
                :percentage="selectedProjectDetail.usageRate" 
                :color="getProgressColor(selectedProjectDetail.usageRate)" 
                :pivot-text="`${selectedProjectDetail.usageRate}%`"
              />
            </template>
          </van-cell>
        </van-cell-group>
        
        <div class="section-title">预算使用明细</div>
        <van-cell-group inset>
          <template v-if="selectedProjectDetail.details && selectedProjectDetail.details.length > 0">
            <van-cell v-for="(item, index) in selectedProjectDetail.details" :key="index" :title="item.category">
              <template #value>
                <div class="detail-amount">¥{{ formatAmount(item.amount) }}</div>
              </template>
            </van-cell>
          </template>
          <van-cell v-else title="暂无使用明细" />
        </van-cell-group>
        
        <div class="section-title">调整记录</div>
        <van-cell-group inset>
          <template v-if="selectedProjectDetail.adjustments && selectedProjectDetail.adjustments.length > 0">
            <van-cell v-for="(item, index) in selectedProjectDetail.adjustments" :key="index">
              <template #title>
                <div>{{ getAdjustmentTypeText(item.type) }} · {{ item.date }}</div>
              </template>
              <template #value>
                <div class="adjustment-amount" :class="getAmountClass(item.type)">
                  {{ getAmountPrefix(item.type) }}¥{{ formatAmount(item.amount) }}
                </div>
              </template>
              <template #label>
                <div>{{ item.reason }}</div>
              </template>
            </van-cell>
          </template>
          <van-cell v-else title="暂无调整记录" />
        </van-cell-group>
      </div>
      <van-empty v-else description="无法加载项目详情" />
    </CustomPopup>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { 
  NavBar, Empty, DropdownMenu, DropdownItem, 
  Cell, CellGroup, Button, Tag, Progress,
  Dialog, Form, Field, Popup, Picker, Toast,
  Tabs, Tab
} from 'vant'
import CustomPopup from '@/components/CustomPopup.vue'
import 'vant/es/toast/style'

export default {
  name: 'FinanceBudgetManagement',
  components: {
    vanNavBar: NavBar,
    vanEmpty: Empty,
    vanDropdownMenu: DropdownMenu,
    vanDropdownItem: DropdownItem,
    vanCell: Cell,
    vanCellGroup: CellGroup,
    vanButton: Button,
    vanTag: Tag,
    vanProgress: Progress,
    vanDialog: Dialog,
    vanForm: Form,
    vanField: Field,
    vanPopup: Popup,
    vanPicker: Picker,
    vanTabs: Tabs,
    vanTab: Tab,
    CustomPopup
  },
  setup() {
    const router = useRouter()
    
    // 当前用户信息
    const userName = ref('张医生')
    
    // 调整记录选项卡
    const activeAdjustmentTab = ref(0)
    
    // 年份选择
    const selectedYear = ref('2024年')
    const showYearPicker = ref(false)
    const yearOptions = [
      { text: '2022年', value: '2022年' },
      { text: '2023年', value: '2023年' },
      { text: '2024年', value: '2024年' }
    ]
    
    // 预算项目列表 - 这里将直接显示用户有权限查看的所有预算项目
    const budgetProjects = ref([
      { 
        id: 1, 
        name: '差旅费', 
        totalAmount: 50000, 
        usedAmount: 30000, 
        availableAmount: 20000, 
        usageRate: 60,
        details: [
          { category: '机票', amount: 15000 },
          { category: '住宿', amount: 10000 },
          { category: '其他', amount: 5000 }
        ],
        adjustments: [
          { type: 'increase', amount: 10000, date: '2023-12-15', reason: '临床研讨会增加差旅需求' }
        ]
      },
      { 
        id: 2, 
        name: '办公费', 
        totalAmount: 20000, 
        usedAmount: 5000, 
        availableAmount: 15000, 
        usageRate: 25,
        details: [
          { category: '办公用品', amount: 3000 },
          { category: '打印费', amount: 2000 }
        ],
        adjustments: []
      },
      { 
        id: 3, 
        name: '培训费', 
        totalAmount: 30000, 
        usedAmount: 15000, 
        availableAmount: 15000, 
        usageRate: 50,
        details: [
          { category: '专业培训', amount: 10000 },
          { category: '会议费', amount: 5000 }
        ],
        adjustments: [
          { type: 'increase', amount: 5000, date: '2023-11-20', reason: '新技术培训需求' }
        ]
      },
      { 
        id: 4, 
        name: '医疗设备采购', 
        totalAmount: 200000, 
        usedAmount: 150000, 
        availableAmount: 50000, 
        usageRate: 75,
        details: [
          { category: '诊断设备', amount: 100000 },
          { category: '监护设备', amount: 50000 }
        ],
        adjustments: [
          { type: 'decrease', amount: 20000, date: '2023-09-10', reason: '设备价格下降' }
        ]
      },
      { 
        id: 5, 
        name: '临床研究项目', 
        totalAmount: 100000, 
        usedAmount: 60000, 
        availableAmount: 40000, 
        usageRate: 60,
        details: [
          { category: '实验材料', amount: 40000 },
          { category: '数据分析', amount: 20000 }
        ],
        adjustments: [
          { type: 'transfer', amount: 10000, date: '2023-10-05', reason: '调整研究方向，重新分配预算' }
        ]
      }
    ])
    
    // 项目选项 - 用于预算调整选择
    const projectOptions = computed(() => {
      return budgetProjects.value.map(project => ({
        text: project.name,
        value: project.id
      }))
    })
    
    // 预算类别选项
    const budgetCategoryOptions = [
      { text: '差旅费', value: 'travel' },
      { text: '办公费', value: 'office' },
      { text: '培训费', value: 'training' },
      { text: '设备费', value: 'equipment' },
      { text: '人员经费', value: 'personnel' },
      { text: '会议费', value: 'meeting' },
      { text: '专项经费', value: 'special' },
      { text: '外协费用', value: 'outsourcing' }
    ]
    
    // 我的调整记录
    const myAdjustmentRecords = ref([
      { 
        id: 1, 
        projectName: '差旅费', 
        type: 'increase', 
        amount: 10000, 
        reason: '新增临床研究项目差旅预算', 
        applicant: '张医生', 
        date: '2023-10-15', 
        status: 'approved' 
      },
      { 
        id: 2, 
        projectName: '医疗设备采购', 
        type: 'transfer', 
        amount: 20000, 
        reason: '调整设备采购结构', 
        applicant: '张医生', 
        date: '2023-09-20', 
        status: 'pending' 
      }
    ])
    
    // 待审批的调整记录
    const pendingApprovalRecords = ref([
      { 
        id: 3, 
        projectName: '临床研究项目', 
        type: 'increase', 
        amount: 50000, 
        reason: '扩大研究范围，增加实验样本', 
        applicant: '李主任', 
        date: '2023-10-10', 
        status: 'pending' 
      }
    ])
    
    // 预算调整弹窗
    const showAdjustmentDialog = ref(false)
    
    // 项目详情弹窗
    const showDetailDialog = ref(false)
    const selectedProjectDetail = ref(null)
    
    // 选择器
    const showProjectPicker = ref(false)
    const showCategoryPicker = ref(false)
    const showTypePicker = ref(false)
    
    // 预算调整表单
    const adjustmentForm = reactive({
      project: '',
      projectId: null,
      category: '',
      type: '',
      amount: '',
      reason: '',
      source: ''
    })
    
    // 调整类型选项
    const adjustmentTypes = [
      { text: '追加预算', value: 'increase' },
      { text: '调减预算', value: 'decrease' },
      { text: '预算结构调整', value: 'transfer' }
    ]
    
    // 格式化金额
    const formatAmount = (amount) => {
      if (!amount && amount !== 0) return '0.00'
      return parseFloat(amount).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
    }
    
    // 获取使用率颜色类
    const getRateClass = (rate) => {
      if (rate >= 90) return 'danger'
      if (rate >= 70) return 'warning'
      return 'normal'
    }
    
    // 获取进度条颜色
    const getProgressColor = (rate) => {
      if (rate >= 90) return '#ee0a24'
      if (rate >= 70) return '#ff976a'
      return '#1989fa'
    }
    
    // 获取标签类型
    const getTagType = (rate) => {
      if (rate >= 90) return 'danger'
      if (rate >= 70) return 'warning'
      return 'primary'
    }
    
    // 获取调整状态类型
    const getAdjustmentStatusType = (status) => {
      const statusMap = {
        'approved': 'success',
        'pending': 'warning',
        'rejected': 'danger'
      }
      return statusMap[status] || 'default'
    }
    
    // 获取调整状态文本
    const getAdjustmentStatusText = (status) => {
      const statusMap = {
        'approved': '已批准',
        'pending': '审批中',
        'rejected': '已拒绝'
      }
      return statusMap[status] || status
    }
    
    // 获取调整类型文本
    const getAdjustmentTypeText = (type) => {
      const typeMap = {
        'increase': '追加预算',
        'decrease': '调减预算',
        'transfer': '预算结构调整'
      }
      return typeMap[type] || type
    }
    
    // 获取金额前缀
    const getAmountPrefix = (type) => {
      if (type === 'increase') return '+'
      if (type === 'decrease') return '-'
      return '±'
    }
    
    // 获取金额CSS类
    const getAmountClass = (type) => {
      if (type === 'increase') return 'increase'
      if (type === 'decrease') return 'decrease'
      return 'transfer'
    }
    
    // 重置调整表单
    const resetAdjustmentForm = () => {
      Object.keys(adjustmentForm).forEach(key => {
        adjustmentForm[key] = ''
      })
      adjustmentForm.projectId = null
    }
    
    // 查看项目详情
    const viewProjectDetail = (project) => {
      try {
        // 检查项目数据是否有效
        if (!project) {
          Toast('项目数据无效')
          return
        }
        
        // 创建深拷贝避免修改原始数据
        const projectData = JSON.parse(JSON.stringify(project))
        
        // 确保必要属性存在
        if (!projectData.details) projectData.details = []
        if (!projectData.adjustments) projectData.adjustments = []
        
        // 设置数据并显示弹窗
        selectedProjectDetail.value = projectData
        showDetailDialog.value = true
      } catch (error) {
        console.error('打开项目详情出错:', error)
        Toast.fail('无法显示项目详情')
      }
    }
    
    // 显示调整对话框
    const handleShowAdjustmentDialog = () => {
      try {
        // 重置表单并显示弹窗
        resetAdjustmentForm()
        showAdjustmentDialog.value = true
      } catch (error) {
        console.error('显示调整弹窗出错:', error)
        Toast.fail('操作失败，请稍后再试')
      }
    }
    
    // 取消调整
    const cancelAdjustment = () => {
      // 显示确认对话框
      Dialog.confirm({
        title: '确认取消',
        message: '是否放弃当前编辑的内容？',
      })
        .then(() => {
          resetAdjustmentForm()
          showAdjustmentDialog.value = false
        })
        .catch(() => {
          // 用户取消，不做任何操作
        })
    }
    
    // 处理调整弹窗关闭
    const handleAdjustmentClose = () => {
      // 如果表单已填写，显示确认对话框
      if (isFormDirty()) {
        Dialog.confirm({
          title: '确认关闭',
          message: '是否放弃当前编辑的内容？',
        })
          .then(() => {
            resetAdjustmentForm()
          })
          .catch(() => {
            // 重新打开弹窗
            nextTick(() => {
              showAdjustmentDialog.value = true
            })
          })
      } else {
        resetAdjustmentForm()
      }
    }
    
    // 判断表单是否已填写
    const isFormDirty = () => {
      return adjustmentForm.project || 
             adjustmentForm.category || 
             adjustmentForm.type || 
             adjustmentForm.amount || 
             adjustmentForm.reason || 
             adjustmentForm.source
    }
    
    // 处理详情弹窗关闭
    const handleDetailClose = () => {
      selectedProjectDetail.value = null
    }
    
    // 提交调整申请
    const submitAdjustment = () => {
      try {
        // 验证必填字段
        const requiredFields = ['project', 'category', 'type', 'amount', 'reason']
        
        // 如果是追加预算，需要资金来源
        if (adjustmentForm.type === '追加预算') {
          requiredFields.push('source')
        }
        
        // 检查必填字段
        for (const field of requiredFields) {
          if (!adjustmentForm[field]) {
            const fieldLabels = {
              project: '预算项目',
              category: '预算类别',
              type: '调整类型',
              amount: '调整金额',
              reason: '调整原因',
              source: '资金来源'
            }
            Toast(`请填写${fieldLabels[field]}`)
            return
          }
        }
        
        // 金额必须大于0
        if (parseFloat(adjustmentForm.amount) <= 0) {
          Toast('调整金额必须大于0')
          return
        }
        
        // 模拟数据更新
        const newRecord = {
          id: myAdjustmentRecords.value.length + 1,
          projectName: adjustmentForm.project,
          type: adjustmentForm.type === '追加预算' ? 'increase' : 
                adjustmentForm.type === '调减预算' ? 'decrease' : 'transfer',
          amount: parseFloat(adjustmentForm.amount),
          reason: adjustmentForm.reason,
          applicant: userName.value,
          date: new Date().toISOString().split('T')[0],
          status: 'pending'
        }
        
        myAdjustmentRecords.value.unshift(newRecord)
        Toast.success('预算调整申请已提交')
        
        // 关闭弹窗
        showAdjustmentDialog.value = false
        
        // 重置表单
        resetAdjustmentForm()
      } catch (error) {
        console.error('提交调整申请出错:', error)
        Toast.fail('提交失败，请稍后再试')
      }
    }
    
    // 批准预算调整
    const approveAdjustment = (item) => {
      Dialog.confirm({
        title: '确认批准',
        message: `确定批准这项预算调整申请吗？`,
      }).then(() => {
        try {
          // 模拟审批通过
          const index = pendingApprovalRecords.value.findIndex(record => record.id === item.id)
          if (index !== -1) {
            pendingApprovalRecords.value[index].status = 'approved'
            // 实际应用中应该调用API更新数据
            Toast.success('已批准预算调整申请')
            // 从待审批列表中移除
            pendingApprovalRecords.value.splice(index, 1)
          }
        } catch (error) {
          console.error('审批操作出错:', error)
          Toast.fail('操作失败，请稍后再试')
        }
      }).catch(() => {
        // 用户取消，不做处理
      })
    }
    
    // 拒绝预算调整
    const rejectAdjustment = (item) => {
      Dialog.confirm({
        title: '确认拒绝',
        message: `确定拒绝这项预算调整申请吗？`,
      }).then(() => {
        try {
          // 模拟审批拒绝
          const index = pendingApprovalRecords.value.findIndex(record => record.id === item.id)
          if (index !== -1) {
            pendingApprovalRecords.value[index].status = 'rejected'
            // 实际应用中应该调用API更新数据
            Toast.success('已拒绝预算调整申请')
            // 从待审批列表中移除
            pendingApprovalRecords.value.splice(index, 1)
          }
        } catch (error) {
          console.error('拒绝操作出错:', error)
          Toast.fail('操作失败，请稍后再试')
        }
      }).catch(() => {
        // 用户取消，不做处理
      })
    }
    
    // 年份选择确认
    const onYearSelected = (value) => {
      selectedYear.value = value.text
      showYearPicker.value = false
      
      // 这里应该调用API重新加载对应年份的预算数据
      Toast.loading({
        message: '加载预算数据...',
        duration: 1000,
        forbidClick: true
      })
    }
    
    // 项目选择确认
    const onProjectSelected = (value) => {
      adjustmentForm.project = value.text
      adjustmentForm.projectId = value.value
      showProjectPicker.value = false
    }
    
    // 预算类别选择确认
    const onCategorySelected = (value) => {
      adjustmentForm.category = value.text
      showCategoryPicker.value = false
    }
    
    // 调整类型选择确认
    const onTypeSelected = (value) => {
      adjustmentForm.type = value.text
      showTypePicker.value = false
    }
    
    // 初始化
    onMounted(() => {
      console.log('预算管理页面加载完成')
      
      // 确保所有弹窗初始状态为关闭
      showAdjustmentDialog.value = false
      showDetailDialog.value = false
      selectedProjectDetail.value = null
      
      // 这里应该从实际API加载预算数据
      try {
        // 模拟数据加载
        // loadBudgetData()
      } catch (error) {
        console.error('加载预算数据出错:', error)
        Toast.fail('数据加载失败，请刷新页面重试')
      }
    })

    return {
      activeAdjustmentTab,
      userName,
      selectedYear,
      showYearPicker,
      yearOptions,
      budgetProjects,
      projectOptions,
      budgetCategoryOptions,
      myAdjustmentRecords,
      pendingApprovalRecords,
      showAdjustmentDialog,
      showDetailDialog,
      showProjectPicker,
      showCategoryPicker,
      showTypePicker,
      adjustmentForm,
      selectedProjectDetail,
      adjustmentTypes,
      formatAmount,
      getRateClass,
      getProgressColor,
      getTagType,
      getAdjustmentStatusType,
      getAdjustmentStatusText,
      getAdjustmentTypeText,
      getAmountPrefix,
      getAmountClass,
      viewProjectDetail,
      handleShowAdjustmentDialog,
      onYearSelected,
      onProjectSelected,
      onCategorySelected,
      onTypeSelected,
      submitAdjustment,
      approveAdjustment,
      rejectAdjustment,
      cancelAdjustment,
      handleAdjustmentClose,
      handleDetailClose,
      isFormDirty
    }
  }
}
</script>

<style scoped>
.budget-page {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 24px;
}

.content-area {
  padding: 16px;
}

.budget-overview-card {
  background-color: white;
  border-radius: 12px;
  margin-bottom: 16px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.filter-area {
  padding-top: 8px;
}

.budget-list-section {
  margin-bottom: 16px;
}

.budget-adjustment-section {
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  margin: 16px 0 8px;
  padding-left: 4px;
}

.category-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.category-amount {
  font-size: 12px;
  color: #646566;
}

.adjustment-title {
  font-weight: 500;
}

.adjustment-info {
  font-size: 12px;
  color: #969799;
  margin-top: 4px;
}

.adjustment-amount {
  margin-bottom: 4px;
  font-weight: 500;
  text-align: right;
}

.adjustment-amount.increase {
  color: #07c160;
}

.adjustment-amount.decrease {
  color: #ee0a24;
}

.adjustment-amount.transfer {
  color: #1989fa;
}

.budget-adjustment-section .van-empty {
  padding: 32px 0;
}

.action-buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.dialog-content {
  padding: 16px;
  max-height: 70vh;
  overflow-y: auto;
}

.project-detail {
  padding: 16px;
}

.detail-amount {
  color: #323233;
  font-weight: 500;
}

/* 确保Dialog中的表单正确显示 */
:deep(.van-dialog__content) {
  padding-top: 8px;
}

:deep(.van-cell-group--inset) {
  margin: 12px 0;
}

:deep(.van-dialog__footer) {
  padding: 8px 16px 16px;
}

.popup-footer-buttons {
  display: flex;
  gap: 12px;
}

.popup-footer-buttons .van-button {
  flex: 1;
}
</style> 